<template>
  <je-modal
    v-model:visible="modalShow"
    width="650px"
    height="auto"
    title="个人中心"
    cancel-button="关闭"
    :maximizable="false"
    mask-closable
    @close="handleClose"
  >
    <div class="je-admin-personal-center">
      <div class="infomation-left">
        <img
          v-if="photoUrl"
          :src="photoUrl"
          style="display: block; width: 130px; height: 130px; border-radius: 50%"
        />
        <div v-else style="width: 130px; height: 130px; border-radius: 50%">
          <span class="usename-img">{{ username }}</span>
        </div>
        <div class="username">{{ currentUserData.name }}</div>
      </div>
      <div class="infomation-right">
        <div v-for="(item, index) in infomationData" :key="index" style="padding-bottom: 26px"
          ><span class="label">{{ item.key }}</span
          ><span style="margin-left: 20px">{{
            formatCurrentInfo(item, currentUserData)
          }}</span></div
        >
      </div>
    </div>
  </je-modal>
</template>
<script>
  import { defineComponent, toRefs, reactive, onMounted } from 'vue';
  export default defineComponent({
    name: 'AdminPersonalCenter',
    components: {},
    props: {
      visible: Boolean,
      currentUser: Object,
      urlImg: String,
    },
    emits: ['closeModal'],
    setup(props, { emit }) {
      const state = reactive({
        modalShow: props.visible,
        infomationData: [
          { key: '账号', value: 'code' },
          { key: '手机号', value: 'phone' },
          { key: '部门', value: 'organization', name: 'name' },
          { key: '性别', value: 'sexName' },
          { key: '邮箱', value: 'email' },
          { key: '出生日期', value: 'birthDate' },
          { key: '年龄', value: 'age' },
        ],
        currentUserData: props.currentUser,
        photoUrl: props.urlImg,
        username: '',
      });
      const methods = {
        getName() {
          const { name } = state.currentUserData;
          state.username = name && name.slice(-2);
        },
        handleClose() {
          emit('closeModal');
        },
        // 转换名称显示
        formatCurrentInfo(item, currentUserData) {
          if (item.name) {
            return currentUserData[item.value][item.name];
          } else {
            if (item.value == 'birthDate') {
              return currentUserData[item.value]?.split(' ')[0] || '暂无';
            } else {
              return currentUserData[item.value] || '暂无';
            }
          }
        },
      };
      onMounted(() => {
        methods.getName();
      });
      return { ...methods, ...toRefs(state) };
    },
  });
</script>
<style lang="less" scoped>
  .je-admin-personal-center {
    display: flex;
    .infomation-left {
      text-align: center;
      .username {
        margin-top: 10px;
        display: block;
      }
      .usename-img {
        display: inline-block;
        width: 100%;
        color: #fff;
        height: 100%;
        border-radius: 100%;
        font-size: 45px;
        line-height: 130px;
        background: #faa03a;
        text-align: center;
      }
    }
    .infomation-right {
      width: 70%;
      .label {
        width: 100px;
        display: inline-block;
        text-align: right;
      }
    }
  }
</style>
